<template>
  <div class="my">
    <header>
      <!-- 登录 -->
      <div class="login banner" v-if="isLogin">
        <van-row> </van-row>
        <van-row>
          <van-col offset="1" span="11">
            <van-row type="flex" align="center">
              <van-image width="1.5rem" height="1.5rem" round :src="userInfo.photo" />
              <span style="color: #fff;font-size: 0.4rem; margin-left: 0.4rem;">
                {{userInfo.name}}
              </span>
            </van-row>
          </van-col>
          <van-col span="6" offset="6" style="height:100%;display: flex;align-items: center;">
            <van-button type="default" size="mini" round style="height:0.42667rem" @click="$router.push('/user')">编辑资料</van-button>
          </van-col>
        </van-row>
        <van-row>
          <van-grid class="grid" :border="false">
            <van-grid-item text="头条">
              <template #icon>
                {{userInfo.art_count}}
              </template>
            </van-grid-item>
            <van-grid-item text="粉丝">
              <template #icon>
                {{userInfo.fans_count}}
              </template>
            </van-grid-item>
            <van-grid-item text="关注">
              <template #icon>
                {{userInfo.follow_count}}
              </template>
            </van-grid-item>
            <van-grid-item text="获赞">
              <template #icon>
                {{userInfo.like_count}}
              </template>
            </van-grid-item>
          </van-grid>
        </van-row>
      </div>
      <!-- 未登录 -->
      <div class="logout banner" v-else>
        <div class="img-wai" @click="$router.push('/login')">
          <van-image width="1.76rem" height="1.76rem" :src='imgSrc' />
          <span class="text">登录/注册</span>
        </div>
      </div>
    </header>
    <main>
      <div>
        <van-grid :column-num="2" clickable class="grid2">
          <van-grid-item text="收藏">
            <template #icon>
              <span class="toutiao toutiao-shoucang"></span>
            </template>
          </van-grid-item>
          <van-grid-item text="历史">
            <template #icon>
              <span class="toutiao toutiao-lishi"></span>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="link">
        <van-cell title="消息通知" is-link />
        <van-cell title="小智同学" is-link />
      </div>
    </main>
    <footer>
      <van-button v-if="isLogin" class="exit" @click="logout" block>退出</van-button>
    </footer>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
import { mapGetters } from 'vuex'
import imgSrc from '@/assets/images/mobile.png'
export default {
  created() {
    this.getUserInfo()
  },
  data() {
    return {
      imgSrc,
      userInfo: {}
    }
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  methods: {
    async logout() {
      try {
        await this.$dialog.confirm({
          title: '黑马头条',
          message: '是否确认退出该账号'
        })
        this.$store.commit('SET_TOKEN', {})
      } catch { }
    },
    async getUserInfo() {
      if (this.isLogin) {
        const { data: res } = await getUserInfoAPI()
        console.log(res)
        this.userInfo = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
//calucate
//注意符号两侧必须有空格
.my {
  height: calc(100vh - 100px);
  background-color: #f5f7f9;
}

.link {
  margin: 10px 0;
}

.banner {
  width: 100%;
  height: 5.33333rem;
  background: url('@/assets/images/banner.png') no-repeat 0 0/cover;
}

.logout {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .img-wai {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .text {
    color: #fff;
    font-size: 0.4rem;
    margin-top: 0.26667rem;
  }
}

.login {
  display: flex;
  flex-direction: column;

  >.van-row {
    flex: 1
  }
}

:deep(.grid) {
  .van-grid-item__content {
    color: #fff;
    background-color: unset;
  }

  .van-grid-item__text {
    color: #fff
  }

  .van-grid-item__icon-wrapper {
    font-size: 0.4rem;
  }
}

.grid2 {
  .toutiao {
    font-size: 40px;
  }

  .toutiao-shoucang {
    color: red
  }

  .toutiao-lishi {
    color: orange
  }
}

.exit {
  .van-button__text {
    color: red;
  }

}
</style>
